<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      class="daohanglan"
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class=""> 内容详情 </view>
      <view class="head_right">
        <view class="zhuan">
          <image
            src="@/static/images/slices/icon_bai_zhunfa.png"
            mode=""
          ></image>
        </view>
      </view>
    </view>
    <view class="box">
      <!-- 用户头像 -->
      <view class="box_head">
        <view class="head_image" v-if="detail.user">
          <image :src="detail.user.avatar_url" mode=""></image>
        </view>
        <view class="head_flx" v-if="detail.user">
          <view class="flx1"> {{ detail.user.nick_name }} </view>
          <view class="flx2"> {{ detail.create_time }} </view>
        </view>
        <view
          class="user_img_right"
          v-if="detail.user && !detail.user.is_guanzhu"
          @click="subRegard"
        >
          <view>
            <u-icon size="17" name="plus" color="#EEEEEE"></u-icon>
          </view>
          <view class="btn_text">关注</view>
        </view>
        <view
          class="user_img_right_false"
          v-if="detail.user && detail.user.is_guanzhu"
          @click="subRegard"
        >
          <view class="btn_text_false">已关注</view>
        </view>
      </view>

      <view class="all_detail">
        <!-- 预览遮罩层 -->
        <view
          class="Preview_model"
          @click="goMember"
          v-if="my_level_id < detail.grade_auth"
        >
          升级会员等级解锁全部内容
        </view>

        <!-- 内容 -->
        <view class="box_content">
          <view class="content_title" v-if="detail.title">
            {{ detail.title }}</view
          >
          <view class="content_t" v-html="detail.content"> </view>
          <!-- 图片 -->
          <view
            class="jiugong"
            :class="
              detail.file.length == 1
                ? 'jiugong1'
                : detail.file.length == 4
                ? 'jiugong4'
                : ''
            "
            v-if="detail.file"
          >
            <view
              class="jiugong_img"
              v-for="(itemValue, index) in detail.file"
              :key="index"
              @click.stop="goPreview(itemValue, detail.file, index)"
            >
              <!-- 图片展示图 -->
              <image
                :src="itemValue.url"
                v-if="itemValue.file_type == 10"
              ></image>
              <!-- 视频展示图 -->
              <image
                :src="itemValue.url_img"
                v-if="itemValue.file_type == 30"
              ></image>
              <!-- 遮罩层 -->
              <view class="jiugong_img_mask" v-if="itemValue.file_type == 30">
                <view class="video_cover_play">
                  <image src="@/static/images/icon_dtym_bofang.png"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 输入评论 -->
        <view class="box_input">
          <scroll-view :scroll-top="99999" scroll-y="true" class="scroll-Y">
            <view class="operate_top">
              <u-input
                class="commentInput"
                type="text"
                :placeholder="plsText"
                :focus="focusKuwei"
                border="none"
                shape="circle"
                color="#ADADAD"
                v-model="commentValue"
                @change="change"
                @confirm="confirm"
                placeholderStyle="color:#ADADAD"
              >
              </u-input>
            </view>

            <!-- 	<view class="mod_icon" v-if="focusKuwei">
						<view class="check_image" @click.stop="current_icon = 0">
							<image src="@/static/images/icon_tlzxq_jianpan.png" mode=""></image>
						</view>
						<view class="check_image" @click.stop="current_icon = 1">
							<image src="@/static/images/icon_tlzxq_yuyin.png" mode=""></image>
						</view>
						<view class="check_image" @click.stop="uploadFile">
							<image src="@/static/images/icon_tlzxq_tupian.png" mode=""></image>
						</view>
					</view> -->
          </scroll-view>
        </view>
        <view class="dianzan">
          <image
            v-if="detail.is_like"
            @click="handLikes"
            src="@/static/images/slices/icon_tlzxq_dianzan_xuanzhong.png"
          ></image>
          <image
            v-else
            @click="handLikes"
            src="@/static/images/slices/icon_tlzxq_dianzan.png"
            mode=""
          ></image>
        </view>
      </view>
    </view>

    <view class="distance"> </view>
    <view class="interaction">
      <view class="interaction_title" @click="show = true">
        共创（{{ total }})
        <!-- ({{ detail.comment_count }}) -->
      </view>
      <view class="interaction_box">
        <view class="empty_view" v-if="list && list.length == 0">
          <image
            class="item_left_clickable"
            src="../../static/images/my/kong.png"
            mode=""
          ></image>
          <view>当前暂无评论~</view>
        </view>
        <reviewContent
          ref="review"
          :reply="reply"
          :reply_one="reply"
          v-for="(item, index) in list"
          :value="item"
          :id="currentId"
          :type="collectType"
          :index="index"
		  :my_level_id="my_level_id"
          @reply="handReply"
          @replyC="handReply1"
          @refresh="refresh"
        ></reviewContent>
      </view>
    </view>
    <!-- <view class="btn_box" v-if="!focusKuwei">
	  <view class="btn_box_ping" @click="openPl">
	    <u-icon
	      name="../../static/images/icon_tllb_taolun.png"
	      size="20"
	    ></u-icon>
	    <text class="btn_box_text">评论</text>
	  </view>
	  <view class="btn_box_ping" @click="hanZan">
	    <image
	      class="zanImg1"
	      v-show="datas.is_like"
	      src="@/static/images/slices/icon_tlzxq_dianzan_xuanzhong.png"
	    ></image>
	    <image
	      class="zanImg1"
	      v-show="!datas.is_like"
	      src="@/static/weichuang/icon_fld_dianzan.png"
	    ></image>
	    <text
	      class="btn_box_text"
	      :style="{ color: datas.is_like ? '#55B877' : '' }"
	      >赞</text
	    >
	  </view>
	</view>
	
	<view class="operate1" v-else>
	  <view class="inp" style="width: 502rpx">
	    <u--input
	      :focus="focusKuwei"
	      :placeholder="plsText"
	      border="none"
	      placeholderStyle="font-size:30rpx;color:#ADADAD;"
	      color="#ADADAD"
	      v-model="value"
	      @change="change"
	      inputAlign="left"
	      @focus="focus"
	      @blur="blur"
	    ></u--input>
	  </view>
	
	  <view class="sending_btn" @click="send"> 发送 </view>
	</view> -->

    <u-popup :show="show" @close="close" @open="show = true">
      <view class="more">
        <view class="more_close" @click="show = false">
          <u-icon name="close" color="#adadad" size="22"></u-icon>
        </view>
        <view class="more_title"> 更多共创 </view>
        <view class="more_box">
          <!-- <reviewContent :reply="false" :promptSound="true"></reviewContent> -->
        </view>
      </view>
    </u-popup>
	
	
	<u-popup mode="center" :show="show1" @close="close1" @open="open1">
		<view class="pop_live">
			<view class="pop_live_title">
				请选择查看需要的行者权限
			</view>
			<u-radio-group 
			    v-model="live"
				activeColor="rgb(85, 184, 119)"
			    iconPlacement="right">
				<view class="pop_live_box">
					<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(item.level_id)" v-for="(item,index) in liveList" :key="item.level_id">
						<!-- 元气驿站 -->
						{{item.level_name}}
						<u-radio :name="item.level_id"></u-radio>
					</view>
					<!-- <view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(2)">
						启初梦谷
						<u-radio :name="2"></u-radio>
					</view>
					<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(3)">
						青空天台
						<u-radio :name="3"></u-radio>
					</view>
					<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(4)">
						无极云顶
						<u-radio :name="4"></u-radio>
					</view>
					<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(5)">
						返朴归源
						<u-radio :name="5"></u-radio>
					</view> -->
					
					<view class="pop_live_btn">
						<view class="live_btn" @click="liveColse">
							取消
						</view>
						<view class="live_btn" style="background: rgb(85, 184, 119);color: #fff;" @click="liveSubmit">
							确定
						</view>
					</view>
				</view>
				
			</u-radio-group>
		</view>
	</u-popup>
	
	<floatingBall></floatingBall>
  </view>
</template>

<script>
import reviewContent from "@/pages/detail/gongchuang/reviewContent.vue"; //评论
import { pinglunList, huifu, dianzan } from "@/common/api/gongchuang.js";
export default {
  components: {
    reviewContent,
  },
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      list1: [
        {
          name: "回复",
        },
        {
          name: "赞",
        },
        {
          name: "转发",
        },
        {
          name: "收藏",
        },
        {
          name: "礼物",
        },
      ],
      currentIndex: 0,
      text: "说的真好，给你点赞一个！！！",
      value: "",
      inp: true,
      like: false,
      collect: false,
      presentNum: "",
      show: false,
      detail: {},
      commentValue: "",
      id: "",
      list: [],
      replyId: 0,
      reply: true,
      currentId: "",
      collectType: 0,
      is_c: false,
      focusKuwei: false,
      plsText: "我也来写一写...",
      value: "",
      datas: {},
      currentIndex1: 0,
      page: 1,
      total: 0,
      my_level_id: 0,
	  show1: false,
	  live:0,
	  liveList:[]
    };
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
    this.getDetail();
  },
  onLoad(options) {
    this.id = options.id;

    const arr = [1010, 2110, 2645, 9963, 2645];
    this.list1 = this.list1.map((item, index) => {
      return {
        name: item.name + arr[index],
      };
    });

    this.plList();
  },
  onReachBottom() {
    if (this.total > this.list.length) {
      this.page += 1;
      this.plList();
    }
  },
  methods: {
	  open1() {
	  	
	  },
	  close1() {
	  	this.show1 = false;
	  },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
	// 跳会员页面
    goMember() {
      uni.navigateTo({
        url: `/pages/member/index`,
      });
    },
    goPreview(item, file, index) {
      // console.log(item);
      if (item.file_type == 30) {
        // console.log(111111, item);
        uni.navigateTo({
          url: `/components/preview?type=false&vimg=${item.url}`,
        });
      } else if (item.file_type == 10) {
        // console.log(222222222, item);
        // uni.navigateTo({
        //   url: `/components/preview?type=true&img=${item.url}`,
        // });

        // console.log(file,123)

        let str = [];
        for (let i = 0; i < file.length; i++) {
          if (file[i].file_type == 10) {
            str.push(file[i].url);
          }
        }

        uni.previewImage({
          urls: str,
          current: item.url,
          longPressActions: {
            itemList: ["发送给朋友", "保存图片", "收藏"],
            success: function (data) {
              console.log(
                "选中了第" +
                  (data.tapIndex + 1) +
                  "个按钮,第" +
                  (data.index + 1) +
                  "张图片"
              );
            },
            fail: function (err) {
              console.log(err.errMsg);
            },
          },
        });
      }
    },
    plList() {
      pinglunList({
        id: this.id,
        page: this.page,
      }).then((res) => {
        this.list.push(...res.data.list.data);
        this.total = res.data.list.total;
        console.log("ressssss", res.data.list.total);
      });
    },
    click(e) {
      this.currentIndex = e.index;
      if (e.index == 2) {
        this.text = "转发了这条动态";
      }
      if (e.index == 1) {
        this.text = "点赞了这条动态";
      }
    },
    getDetail() {
      this.$http
        .gongchuangGongDetail({
          id: this.id,
        })
        .then((res) => {
          console.log(res, "共创详情");
          this.detail = res.data.detail;
          this.toUserId = this.detail.user_id;
          this.my_level_id = res.data.my_level_id;
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    close() {
      this.show = false;
    },
    // focus() {
    //   this.inp = false;
    // },
    // blur() {
    //   this.inp = true;
    // },
    send() {
      console.log("33333");
    },
    handLike(val) {
      this.like = val;
    },
    handCollect(val) {
      this.collect = val;
    },
    givePresent() {
      this.show = true;
    },
    colsePresent() {
      this.presentNum = "";
      this.show = false;
    },
    openPl() {
      console.log("wwwwwww", this.focusKuwei);
      this.focusKuwei = true;
    },
    hanZan() {
      like_weichuang({
        id: this.currentId,
        type: this.collectType,
        comment_id: 0,
        user_id: this.data.user_id,
      }).then((res) => {
        // if (this.data.is_like == 0) {
        //   this.data.is_like = 1;
        // } else {
        //   this.data.is_like = 0;
        //   // this.data.like_count -= 1;
        // }
      });
    },
    handReply(val, index) {
      console.log("vallll222", val);
      this.plsText = "回复@ " + val.user.nick_name;
      this.replyId = val.id;
      this.toUserId = val.user.user_id;
      this.focusKuwei = true;
      this.is_c = true;
      this.currentIndex1 = index;
    },
    handReply1(val, item, index) {
      console.log("vallll222", val, item);
      this.plsText = "回复@ " + val.user.nick_name;
      this.replyId = item.id;
      this.toUserId = val.user_id;
      this.focusKuwei = true;
      this.is_c = true;
      this.currentIndex1 = index;
    },
    change(e) {
      console.log("eeeeee", e);
    },
	huifu(grade_auth = 0) {
		huifu({
		  id: this.id,
		  file_id: 0,
		  content: this.commentValue,
		  comment_id: this.replyId,
		  comment_user_id: this.toUserId,
		  grade_auth
		}).then((res) => {
		  console.log("resssss", res);
		  this.commentValue = "";
		  this.plsText = "我也来写一些。。。";
		  this.focusKuwei = false;
		  this.toUserId = this.detail.user_id;
		  if (this.is_c) {
		    this.$refs.review[this.currentIndex1].expand();
		    this.is_c = false;
		  }
		  this.list = [];
		  this.page = 1;
		  this.plList();
		});
	},
    confirm(e) {
		
		
		this.$http.userLevelList({}).then(res => {
			if (res.data.userInfo.is_teacher == 1 || res.data.userInfo.is_senators == 1) {
				this.show1 = true;
				console.log('reessssssliiive',res);
				this.liveList = res.data.list;
			} else {
				this.huifu();
			}
		})
		
     
    },
    handLikes() {
      console.log("tttttttt11111111");
      dianzan({
        id: this.id,
        comment_id: 0,
        user_id: this.detail.user_id,
      }).then((res) => {
        if (this.detail.is_like) {
          this.detail.is_like = 0;
        } else {
          this.detail.is_like = 1;
        }
        console.log("ressssss点赞成功", res);
      });
    },
    focus() {},
    blur() {
      setTimeout(() => {
        this.focusKuwei = false;
      }, 0);
      this.plsText = "写回复";
    },
	handLive(live) {
		this.live = live;
	},
	liveColse() {
		this.show1 = false;
	},
	liveSubmit() {
		this.huifu(this.live);
		this.show1 = false;
	}
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  background: #fff;
}

.daohanglan {
  width: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #fff;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #55b877;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}

.zhuan {
  width: 40rpx;
  height: 38rpx;
  margin-left: 40rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.box {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;

  .box_head {
    width: 100%;
    display: flex;
    align-items: center;

    .head_image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .head_flx {
      flex: 1;
      height: 100rpx;
      padding-left: 24rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .flx1 {
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #888888;
      }

      .flx2 {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #888888;
      }
    }

    .head_right {
      width: 142rpx;
      height: 56rpx;
      background: #55b877;
      border-radius: 32rpx 32rpx 32rpx 32rpx;
      font-size: 26rpx;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .all_detail {
    position: relative;
    overflow: hidden;
  }
  .Preview_model {
    height: 100%;
    background: linear-gradient(
      360deg,
      #ffffff 87%,
      rgba(255, 255, 255, 0) 100%
    );
    width: 100%;
    position: absolute;
    top: 50rpx;
    z-index: 100;
    text-align: center;
    line-height: 150rpx;
    // box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(255, 255, 255, 0.6);
  }
  .box_content {
    width: 100%;

    .content_title {
      font-size: 34rpx;
      margin-top: 56rpx;
    }

    .content_t {
      width: 100%;
      font-size: 34rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #474747;
      margin-top: 30rpx;
    }

    .content_text {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #474747;
      line-height: 46rpx;
      margin-top: 40rpx;
    }

    .jiugong {
      margin-top: 32rpx;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .jiugong_img {
        width: 222rpx;
        height: 222rpx;
        margin-right: 12rpx;
        margin-bottom: 12rpx;
        position: relative;

        .jiugong_img_mask {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(1, 1, 1, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;

          .video_cover_play {
            width: 80rpx;
            height: 80rpx;

            image {
              width: 80rpx;
              height: 80rpx;
            }
          }
        }
      }

      image {
        width: 222rpx;
        height: 222rpx;
      }

      .jiugong_img:nth-child(3n) {
        margin-right: 0;
      }
    }

    .jiugong1 {
      width: 400rpx;

      image {
        width: 400rpx;
      }
    }

    .jiugong4 {
      width: 460rpx;

      .jiugong_img:nth-child(3n) {
        margin-right: 12rpx;
      }

      .jiugong_img:nth-child(2n) {
        margin-right: 0;
      }
    }
  }

  .box_input {
    background: #f4f4f4;
    border-radius: 16rpx;
    padding: 24rpx 32rpx;
    box-sizing: border-box;
    margin-top: 40rpx;

    .operate_top {
      width: 100%;
      display: flex;
      align-items: center;
    }
  }

  .user_img_right {
    width: 180rpx;
    height: 64rpx;
    background: #55b877;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn_text {
      margin-left: 11rpx;
      font-size: 28rpx;
      color: #eeeeee;
    }
  }

  .user_img_right_false {
    width: 180rpx;
    height: 64rpx;
    background: rgba(173, 173, 173, 0.102);
    border: 1rpx solid #adadad;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn_text_false {
      margin-left: 11rpx;
      font-size: 28rpx;
      color: #adadad;
    }
  }
}

.dianzan {
  padding: 0 30rpx;
  box-sizing: border-box;
  margin-top: 30rpx;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  font-size: 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #666666;

  image {
    width: 48rpx;
    height: 48rpx;
  }
}

.distance {
  width: 100%;
  height: 16rpx;
  background: #f7f8fa;
  margin-top: 80rpx;
}

.interaction {
  width: 100%;

  .interaction_title {
    width: 100%;
    padding: 24rpx 30rpx;
    border-bottom: 1rpx solid #eee;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #444444;
  }

  .interaction_tabs {
  }

  .interaction_box {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
  }
}

.operate {
  width: 100%;
  height: 120rpx;
  background: #fff;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  padding-right: 30rpx;
  box-sizing: border-box;

  .inp {
    height: 80rpx;
    background: #f4f4f4;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    padding-left: 32rpx;
  }

  .operate_r {
    width: 264rpx;
    height: 92rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 48rpx;

    .operate_item {
      image {
        width: 48rpx;
        height: 48rpx;
      }

      .item_text {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #666666;
        margin-top: 8rpx;
      }
    }
  }

  .sending_btn {
    width: 172rpx;
    height: 80rpx;
    background: #55b877;
    border-radius: 40rpx;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 16rpx;
  }
}

.box_group {
  width: 100%;
  height: 576rpx;
  background: #fff;
  padding: 0 30rpx;
  box-sizing: border-box;

  .group_title {
    width: 100%;
    padding: 32rpx 0 56rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #444444;
  }

  .group_inp {
    width: 100%;
    height: 80rpx;
    background: #f4f4f4;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    box-sizing: border-box;
  }

  .group_btn {
    width: 100%;
    padding: 200rpx 60rpx 46rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .niule {
      display: flex;
      align-items: center;

      .niule_icon {
        width: 12rpx;
        height: 12rpx;
        background: #55b877;
        border-radius: 50%;
      }

      .niule_text {
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #444444;
        margin-left: 16rpx;
      }
    }

    .group_btn1 {
      width: 172rpx;
      height: 64rpx;
      background: #55b877;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
  }
}

.more {
  width: 100%;
  height: 1380rpx;
  overflow-y: scroll;
  background: #ffffff;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
  position: relative;

  .more_close {
    width: 30rpx;
    height: 30rpx;
    position: absolute;
    right: 30rpx;
    top: 30rpx;
  }

  .more_title {
    padding: 32rpx 0 50rpx;
    box-sizing: border-box;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #444444;
    display: flex;
    justify-content: center;
  }

  .more_box {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
  }
}

.btn_box {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 24rpx 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);

  .btn_box_ping {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1rpx solid #eeeeee;

    .zanImg1 {
      width: 38rpx;
      height: 40rpx;
    }

    .btn_box_text {
      font-size: 30rpx;
      color: #888888;
      margin-left: 12rpx;
    }
  }
}

.operate1 {
  width: 100%;
  height: 120rpx;
  background: #fff;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  padding-right: 30rpx;
  box-sizing: border-box;

  .inp {
    height: 80rpx;
    background: #f4f4f4;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    padding-left: 32rpx;
  }

  .sending_btn {
    width: 172rpx;
    height: 80rpx;
    background: #55b877;
    border-radius: 40rpx;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 16rpx;
  }
}

.mod_icon {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #e5e5e5;
  margin-bottom: 38rpx;

  .check_image {
    width: 48rpx;
    height: 48rpx;
    margin-right: 28rpx;

    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .mod_icon_item {
    margin-right: 32rpx;
  }
}

.empty_view {
  margin-top: 100rpx;
  padding-bottom: 120rpx;

  image {
    margin: 0 auto;
    width: 410rpx;
    height: 410rpx;
  }

  view {
    font-size: 30rpx;
    color: #d8d8d8;
    text-align: center;
  }
}

.pop_live {
		width: 570rpx;
		// height: 720rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #fff;
		.pop_live_title {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #666666;
			padding: 30rpx;
			box-sizing: border-box;
		}
		.pop_live_box {
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 0 30rpx;
			box-sizing: border-box;
			.pop_live_item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #ccc;
				padding: 30rpx 0;
				box-sizing: border-box;
			}
		}
		.pop_live_btn {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 28rpx;
      margin-bottom: 28rpx;
			.live_btn {
				width: 46%;
				height: 80rpx;
				border-radius: 24rpx;
				border: 1rpx solid #ccc;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

</style>